Skip to content

Conversation

@garronej
Copy link
Collaborator

…ns (#128)

  • feat: ✨ Add FranceConnect and MonComptePerso connexion buttons

  • fixup review

* feat: ✨ Add FranceConnect and MonComptePerso connexion buttons

* fixup review
@sylvainlg
Copy link
Contributor

I need to add the following css, how can i do it ?

.fr-connect:before {
    background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2235%22%20height%3D%2236%22%20viewBox%3D%220%200%2035%2036%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url%28%23clip0_328_78339%29%22%3E%3Cpath%20d%3D%22M11.9341%2029.4951C11.9207%2029.0928%2012.001%2028.7038%2012.1752%2028.3417L17.1992%2018.3504C17.3465%2018.0553%2017.2662%2017.7334%2017.0518%2017.492C15.1628%2015.534%2014.7877%2012.4762%2016.6231%2010.1159C17.8422%208.54675%2019.9188%207.70185%2021.9552%207.86278C19.5571%209.17708%2017.9896%2011.6984%2018.137%2014.5282C18.2442%2016.5264%2019.1954%2018.2833%2020.6423%2019.5171C20.5887%2019.5574%2020.5217%2019.5976%2020.4815%2019.6781L18.6863%2023.2455C18.271%2023.5137%2016.891%2022.9504%2016.6767%2023.3796C16.4623%2023.8087%2017.7753%2024.4793%2017.8288%2024.9621C17.8422%2025.123%2017.6681%2025.4181%2017.5475%2025.5254C17.1992%2025.807%2015.9666%2025.5924%2015.7657%2025.9948C15.5647%2026.3971%2016.7035%2026.9872%2016.6901%2027.4298C16.6901%2027.7248%2016.5025%2027.9394%2016.248%2028.1003C15.8327%2028.3686%2014.9082%2028.0064%2014.6939%2028.4356C14.4795%2028.8648%2015.3504%2029.3342%2015.3905%2029.8036C15.4173%2030.0584%2015.1494%2030.5948%2014.9216%2030.7423C14.091%2031.2788%2012.5503%2031.8555%2012.5503%2031.8555C12.336%2031.9091%2011.9876%2031.1983%2012.001%2030.8899L11.9341%2029.5085V29.4951Z%22%20fill%3D%22%23C9191E%22%2F%3E%3Cpath%20d%3D%22M19.919%203.78575C20.0797%203.87963%2020.3209%203.8394%2020.4147%203.66505C21.3659%202.14958%2023.0807%201.2108%2024.8626%201.2108C27.7698%201.2108%2030.1277%203.55776%2030.1277%206.468C30.1277%207.64818%2029.7258%208.73449%2029.0693%209.61964C28.4798%2010.4243%2027.6492%2011.0412%2026.6846%2011.3899C26.1219%2011.6045%2025.5056%2011.7252%2024.8626%2011.7252C24.675%2011.7252%2024.5276%2011.8861%2024.5276%2012.0739C24.5276%2012.2616%2024.675%2012.4226%2024.8626%2012.4226C25.5726%2012.4226%2026.2291%2012.3019%2026.8454%2012.0739C27.3947%2011.8861%2027.8904%2011.6179%2028.3325%2011.296C28.5736%2011.1351%2028.788%2010.9473%2028.9889%2010.7462C29.1765%2010.5316%2029.3641%2010.317%2029.5516%2010.1024C30.3554%209.11001%2030.8244%207.83594%2030.8244%206.45459C30.8244%203.16883%2028.1583%200.5%2024.8492%200.5C22.8128%200.5%2020.8836%201.55949%2019.8118%203.28954C19.6912%203.45047%2019.7448%203.66505%2019.9056%203.78575H19.919Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M18.9676%2012.9859C19.4365%2010.5853%2021.4729%208.62723%2023.938%208.21148C25.7199%207.91644%2027.3811%208.38583%2028.6673%209.31121C28.0912%2010.0622%2027.3141%2010.6389%2026.4031%2010.9608C26.0682%2010.5719%2025.5993%2010.317%2025.0366%2010.317C24.0586%2010.317%2023.2548%2011.1083%2023.2548%2012.0739C23.2548%2013.0261%2024.0586%2013.8174%2025.0366%2013.8174C25.8404%2013.8174%2026.4969%2013.2943%2026.7246%2012.597C27.984%2012.208%2029.0826%2011.457%2029.8864%2010.4377C30.717%2011.4704%2031.2127%2012.7579%2031.2127%2014.1661C31.2127%2016.7544%2029.5515%2018.9807%2027.1936%2019.8256C26.9792%2019.9061%2026.8318%2020.0938%2026.8318%2020.3218V24.4793C26.5773%2024.9085%2025.0768%2024.9755%2025.0768%2025.4717C25.0768%2025.968%2026.5773%2026.035%2026.8318%2026.4642C26.9122%2026.6117%2026.8988%2026.9604%2026.8318%2027.1213C26.6443%2027.5371%2025.4251%2027.8723%2025.4251%2028.3417C25.4251%2028.7977%2026.7246%2028.8782%2026.9256%2029.2939C27.0596%2029.5756%2026.9926%2029.8572%2026.8318%2030.112C26.5773%2030.5412%2025.5725%2030.6082%2025.5725%2031.1044C25.5725%2031.6007%2026.5773%2031.6677%2026.8318%2032.0969C26.9658%2032.3383%2026.9658%2032.9552%2026.8318%2033.1832C26.3227%2034.0415%2025.184%2035.2619%2025.184%2035.2619C25.0098%2035.4095%2024.3801%2034.873%2024.2462%2034.5914L23.5495%2033.3173C23.3485%2032.9552%2023.2414%2032.5395%2023.2414%2032.1237V20.523C23.2414%2020.1877%2023.027%2019.9061%2022.7189%2019.7854C20.1064%2018.7527%2018.3782%2016.0436%2018.9676%2013.0127V12.9859Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M13.7027%206.69596C15.5917%205.12685%2018.4051%204.91227%2020.5754%206.17292C21.3525%206.6289%2021.4597%206.60208%2021.9554%207.25923C19.6778%206.37409%2017.5343%207.56769%2015.8998%209.56596C13.984%2011.8995%2014.2117%2015.2791%2016.3285%2017.3713C16.1276%2017.3177%2015.9132%2017.2774%2015.7122%2017.2104C15.4979%2017.1299%2015.2701%2017.1835%2015.1228%2017.3579L12.4835%2020.5632C12.0146%2020.7375%2010.8088%2019.8256%2010.5007%2020.2145C10.1926%2020.6034%2011.3045%2021.6092%2011.2242%2022.0921C11.1974%2022.253%2010.9562%2022.5212%2010.8088%2022.5883C10.3935%2022.7894%209.24136%2022.2798%208.94662%2022.6285C8.65188%2022.9772%209.61648%2023.8623%209.49591%2024.3183C9.41553%2024.6134%209.18777%2024.7877%208.90643%2024.895C8.43753%2025.0693%207.62029%2024.4792%207.31216%2024.8548C7.00402%2025.2303%207.72747%2025.9277%207.64709%2026.4239C7.6069%2026.6921%207.20498%2027.1749%206.95043%2027.2688C6.01262%2027.6175%204.36476%2027.8321%204.36476%2027.8321C4.137%2027.8321%203.98963%2027.0274%204.07002%2026.7189L4.33796%2025.2973C4.41835%2024.8816%204.59251%2024.5061%204.86046%2024.1842L12.2156%2015.2255C12.4299%2014.9707%2012.4433%2014.6086%2012.2825%2014.3135C10.916%2011.8593%2011.3045%208.66741%2013.6759%206.69596H13.7027Z%22%20fill%3D%22%230071BC%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_328_78339%22%3E%3Crect%20width%3D%2235%22%20height%3D%2235%22%20fill%3D%22white%22%20transform%3D%22translate%280%200.5%29%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E) !important;
}

@garronej
Copy link
Collaborator Author

I'll get to it today sorry

@garronej garronej closed this May 27, 2023
@garronej garronej reopened this May 27, 2023
@garronej garronej merged commit cbc47f4 into main May 27, 2023
@garronej garronej deleted the connect-buttons branch May 27, 2023 13:09
garronej added a commit that referenced this pull request May 30, 2023
@garronej
Copy link
Collaborator Author

Hey @sylvainlg,

Sorry I misled you in my code review.
It was best to have three separate component indeed.
Another point is that the build script needed to be modified to include the static assets (.css, .svg).

Anyway:
https://react-dsfr-components.etalab.studio/?path=/docs/components-franceconnectbutton--default
https://react-dsfr-components.etalab.studio/?path=/docs/components-agentconnectbutton--default
https://react-dsfr-components.etalab.studio/?path=/docs/components-moncompteprobutton--default

Thanks a lot for helping me on this and pushing for MonComptePro. Raphael is super happy to have he's button featured.

sbourdon13 pushed a commit to sbourdon13/react-dsfr that referenced this pull request Aug 11, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants